<template>
  <div v-if="orderInfo" class="container with-nav-padding" @click.stop>
    <div v-if="orderStatus == 1" class="status-board" :style="{background: mainColor}">
      <div class="main-text">订单待付款</div>
      <div class="sub-text">
        剩余付款时间：
        <yd-countdown
          v-if="Object.keys(orderInfo).length"
          :time="orderInfo.end_time"
          format="{%m}分{%s}秒"
          :callback="
            () => {
            }
          "
        ></yd-countdown>
        <!-- <yd-countdown
          v-if="orderInfo.end_time"
          time="2019/07/25 17:28:38"
          format="{%m}分{%s}秒"
          :callback="
            () => {
              changeStatus(-1);
            }
          "
        ></yd-countdown>-->
      </div>
    </div>
    <div v-else-if="orderStatus == 4" class="status-board" :style="{background: mainColor}">
      <div class="main-text">订单已完成</div>
      <div class="sub-text">祝您购物愉快</div>
    </div>
    <div v-else-if="orderStatus == 2" class="status-board" :style="{background: mainColor}">
      <div class="main-text">
        {{
        "订单待发货"
        }}
      </div>
      <div class="sub-text">请耐心等待~</div>
    </div>
    <div v-else-if="orderStatus == 3" class="status-board" :style="{background: mainColor}">
      <div class="main-text">
        {{
        "订单待收货"
        }}
      </div>
      <div class="sub-text">
        还剩
        <yd-countdown
          v-if="orderInfo.end_time"
          :time="orderInfo.end_time.replace('-', '/')"
          format="{%d}天"
          :callback="
            () => {
              changeStatus(4);
            }
          "
        ></yd-countdown>自动确认收货
      </div>
    </div>
    <div v-else-if="orderStatus == 4" class="status-board" :style="{background: mainColor}">
      <div class="main-text">交易成功</div>
      <div class="sub-text">赶快去评价吧~</div>
    </div>
    <!-- <div v-else-if="orderStatus == 5" class="status-board">
      <div class="main-text">申诉未完成</div>
      <div class="sub-text">请耐心等待~</div>
    </div>
    <div v-else-if="orderStatus == -2" class="status-board">
      <div class="main-text">申诉已完成</div>
      <div class="sub-text">祝你购物愉快~</div>
    </div>-->
    <div v-else-if="orderStatus == 5" class="status-board" :style="{background: mainColor}">
      <div class="main-text">订单已取消</div>
    </div>
    <div class="addr-info">
      <div class="name_tel">
        <div class="name">{{ orderInfo.realname }}</div>
        <div class="tel">{{ orderInfo.mobile }}</div>
      </div>
      <div class="addr">{{ orderInfo.city_str + " " + orderInfo.detail }}</div>
    </div>
    <!-- <div class="after-sale" v-if="orderStatus == 5 || orderStatus == -2">
      <div class="title with-grey-bottom-border">
        <div class="text">申诉理由</div>
        <div class="time">{{ orderInfo.aftersale.created_at }}</div>
      </div>
      <div class="content">
        {{ orderInfo.aftersale.content }}
      </div>
      <div class="img-box">
        <div
          v-for="(item, index) in orderInfo.aftersale.image"
          :key="index"
          class="img"
        >
          <img :src="item" alt="" />
        </div>
      </div>
    </div>-->
    <!-- <div
      class="after-sale"
      v-if="
        (orderStatus == 5 || orderStatus == -2) &&
          orderInfo.aftersale.is_complete === 1
      "
    >-->
    <!-- <div class="title reply with-grey-bottom-border">
    <div class="text">官方回复</div>-->
    <!-- <div class="time">2018-08-09 20：25</div> -->
    <!-- </div> -->
    <!-- <div class="content">
        {{ orderInfo.aftersale.reply }}
    </div>-->
    <!-- </div> -->
    <div class="item-info">
      <div class="with-grey-bottom-border">
        <item-cell :good="orderInfo"></item-cell>
        <!-- <div style="text-align:right;">
          <button
            v-if="orderStatus == 4 || orderStatus == 3"
            class="btn-after-sale"
            @click="
              $router.push({
                path: '/order/after-sale',
                query: {
                  id: item.id
                }
              })
            "
          >退货退款</button>
        </div>-->
      </div>
    </div>
    <div class="price-container with-grey-bottom-border">
      <div class="price-detail">
        <div>商品总价</div>
        <div class="price">￥{{ totalPrice(orderInfo) }}</div>
      </div>
      <!-- <div class="price-detail">
        <div>运费</div>
        <div class="price">￥{{ orderInfo.freight }}</div>
      </div>-->
      <!-- <div class="price-detail">
        <div>优惠券</div>
        <div class="price">-￥{{ orderInfo.discounts }}</div>
      </div>-->
      <div class="price-detail">
        <div>订单总价</div>
        <div>￥{{ totalPrice(orderInfo) }}</div>
      </div>
      <!-- <div class="price-detail">
        <div>花费积分</div>
        <div>{{ orderInfo.points }}</div>
      </div>-->
    </div>
    <div class="total-price">
      <div>实付款</div>
      <div class="price">￥{{ orderInfo.payment }}</div>
    </div>
    <div class="order-detail">
      <button
        class="copy-btn copyOrderSn"
        data-clipboard-action="copy"
        :data-clipboard-text="orderInfo.order_no"
        @click="copyLink"
      >复制</button>
      <div class="title with-grey-bottom-border">订单详细</div>
      <div class="detail-cell">
        <div class="header">订单编号：</div>
        <div class="text">{{ orderInfo.order_no }}</div>
      </div>
      <!-- <div v-if="orderInfo.commodity[0].is_serve === 1" class="detail-cell">
        <div class="header">服务时间：</div>
        <div class="text">{{ orderInfo.commodity[0].serve_at }}</div>
      </div>-->
      <div class="detail-cell">
        <div class="header">创建时间：</div>
        <div class="text">{{ orderInfo.created_at }}</div>
      </div>
      <div v-if="orderStatus !== 1 && orderStatus !== 5" class="detail-cell">
        <div class="header">付款时间：</div>
        <div class="text">{{ orderInfo.pay_at }}</div>
      </div>
      <!-- <div v-if="orderInfo.commodity[0].is_serve === 1" class="detail-cell">
        <div class="header">师傅名字：</div>
        <div class="text">{{ orderInfo.commodity[0].logistics_id }}</div>
      </div>-->
      <div v-if="orderInfo.mobile" class="detail-cell">
        <div class="header">联系方式：</div>
        <div class="text">{{ orderInfo.mobile }}</div>
      </div>
      <!-- <div class="detail-cell" v-if="orderStatus !== 2 && orderStatus !== 3">
              <div class="header">发货时间：</div>
      <div class="text">2018-08-02 12：08</div>-->
      <!-- </div> -->
    </div>
    <div
      class="bottom-bar"
      :class="{ 'fullscreen-bottom-style': isFullscreen }"
      v-if="orderStatus == 1"
    >
      <a :href="'tel:' + service_tel">
        <button class="cart-btn">
          <img src="@/assets/订单详情-待发货-assets/联系客服.png" alt />
          <div>联系客服</div>
        </button>
      </a>
      <button
        @click="orderCancel(orderInfo.id, 1)"
        class="grey"
        :style="{background: subColor}"
      >取消订单</button>
      <button @click="pay" class="primary" :style="{background: mainColor}">立即支付</button>
    </div>
    <div
      class="bottom-bar"
      :class="{ 'fullscreen-bottom-style': isFullscreen }"
      v-if="orderStatus == 2"
    >
      <button class="cart-btn single">
        <a :href="'tel:' + service_tel">
          <img src="@/assets/订单详情-待发货-assets/联系客服.png" alt />
          联系客服
        </a>
      </button>
    </div>
    <!-- <div
      class="bottom-bar"
      :class="{ 'fullscreen-bottom-style': isFullscreen }"
      v-if="orderStatus == 3"
    >
      <button class="cart-btn">
        <a :href="'tel:' + service_tel">
          <img src="@/assets/订单详情-待发货-assets/联系客服.png" alt />
          <div>联系客服</div>
        </a>
      </button>
      <button
        v-if="orderInfo.commodity[0].is_serve === 0"
        @click="
          $router.push({
            path: '/express-detail',
            query: {
              id: orderInfo.commodity[0].id
            }
          })
        "
        class="grey"
      >查看物流</button>
      <button @click="orderConfirm(orderInfo.order_no)" class="primary">确认收货</button>
    </div>-->
    <div
      class="bottom-bar"
      :class="{ 'fullscreen-bottom-style': isFullscreen }"
      v-if="orderStatus == 4"
    >
      <button class="cart-btn">
        <img src="@/assets/订单详情-待发货-assets/联系客服.png" alt />
        <div>联系客服</div>
      </button>
      <!-- <button @click="$router.push('/profile/order/after-sale')">
              申请售后
      </button>-->
      <button
        @click="
          $router.push({
            path: '/order/comment',
            query: { order_no: orderInfo.order_no }
          })
        "
        class="primary big-btn"
      >去评价</button>
    </div>
    <div
      class="bottom-bar"
      :class="{ 'fullscreen-bottom-style': isFullscreen }"
      v-if="orderStatus == 5"
    >
      <button class="cart-btn">
        <img src="@/assets/订单详情-待发货-assets/联系客服.png" alt />
        <div>联系客服</div>
      </button>
      <button class="primary big-btn">取消</button>
    </div>
    <div
      class="bottom-bar"
      :class="{ 'fullscreen-bottom-style': isFullscreen }"
      v-if="orderStatus == 5 || orderStatus == 4 "
    >
      <button class="cart-btn">
        <img src="@/assets/订单详情-待发货-assets/联系客服.png" alt />
        <div>联系客服</div>
      </button>
      <button @click="orderDelete(orderInfo.id)" class="grey big-btn">删除订单</button>
    </div>
    <!-- <payment-mask
      :orderInfo="orderInfo"
      v-if="showPaymentMask"
      :goodList="orderInfo.commodity"
      @panelClose="showPaymentMask = false"
    ></payment-mask>-->
    <represent-payment
      :orderInfo="orderInfo"
      :isImmediatePay="true"
      v-if="showPaymentMask"
      @panelClose="showPaymentMask = false"
    />
    <confirm ref="cfm"></confirm>
  </div>
</template>

<script>
import itemCell from "./order-item-cell.vue";
import paymentMask from "../../mall/component/payment-mask.vue";
import RepresentPayment from "@/views/mall/component/represent-payment";
import confirm from "@/components/confirm";
import clipboardJs from "clipboard";
import {
  getRepresentOrderDetail,
  changeRepresentOrderStatus,
  deleteRepresentOrder,
  getBalance
} from "@/api/represent";
import {
  // getOrderDetail,
  // orderCancel,
  // orderDelete,
  orderConfirm
} from "@/api/mall";
import { getUserBalance } from "@/api/profile";
import { balancePay } from "@/api/represent";
import { mapState } from "vuex";
const ERR_OK = 200;
export default {
  data() {
    return {
      orderStatus: 1, //订单状态:1=待付款 2=待发货 3=待收货 4=交易完成 5=交易关闭
      orderInfo: null,
      showPaymentMask: false,
      page: 1
    };
  },
  computed: {
    ...mapState({
      isFullscreen: state => state.app.isFullscreen,
      service_tel: state => state.app.service_tel,
      mainColor: state => state.app.mainColor,
      subColor: state => state.app.subColor
    })
  },
  watch: {
    $route: {
      deep: true,
      handler: function(newVal) {
        // console.log(newVal.query.status);
        this.orderStatus = newVal.query.status;
      }
    }
  },
  methods: {
    changeStatus(status) {
      this.$router.replace({
        path: "/order-detail",
        query: {
          order_no: this.orderInfo.order_no,
          status: status
        }
      });
    },
    copyLink() {
      let _this = this;
      let clipboard = new clipboardJs(".copyOrderSn");
      clipboard.on("success", function() {
        _this.$dialog.toast({
          mes: "复制成功",
          timeout: 1000,
          icon: "success"
        });
      });
      clipboard.on("error", function() {
        _this.$dialog.toast({
          mes: "复制失败",
          timeout: 1000,
          icon: "error"
        });
      });
    },
    orderCancel(id, type) {
      this.$refs.cfm.show({
        text: "确认取消订单？",
        callback: () => {
          this._changeRepresentOrderStatus(id, type).then(() => {
            this.$dialog.toast({
              mes: "取消成功",
              timeout: 1500,
              icon: "success"
            });
            // this.changeStatus(-1);
          });
        }
      });
    },
    orderDelete(id) {
      this.$refs.cfm.show({
        text: "确认删除订单？",
        callback: () => {
          this._deleteRepresentOrder(id).then(() => {
            this.$dialog.toast({
              mes: "删除成功",
              timeout: 1500,
              icon: "success"
            });
            this.$router.replace({
              path: "/represent-orders",
              query: {
                orderStatus: "0",
                goodsType: "represent"
              }
            });
          });
        }
      });
    },
    orderConfirm(order_no) {
      this.$refs.cfm.show({
        text: "确认收货？",
        callback: () => {
          orderConfirm({ order_no: order_no }).then(res => {
            if (res.status === 200) {
              this.$dialog.toast({
                mes: "确认收货成功",
                timeout: 1500,
                icon: "success"
              });
              this.changeStatus(4);
            }
          });
        }
      });
    },
    // getOrderDetail(status) {
    //   getOrderDetail({
    //     order_no: this.$route.query.order_no,
    //     status: status
    //   }).then(res => {
    //     if (res.status === 200) {
    //       if (!Object.keys(res.data.data).length) {
    //         this.$router.replace("/orders");
    //       }
    //       let orderInfo = res.data.data;
    //       orderInfo.end_time = orderInfo.end_time.replace(/-/g, "/");
    //       this.orderInfo = orderInfo;
    //       this.$forceUpdate();
    //       if (this.$route.query.action === "pay") this.pay();
    //     }
    //   });
    // },
    totalPrice(orderInfo) {
      let price = 0;
      price -= -orderInfo.price * orderInfo.buy_number;
      return price;
    },
    pay() {
      // getUserBalance().then(res => {
      //   if (res.status === 200) {
      if (this.$route.query.balance) {
        this.orderInfo.balance = this.$route.query.balance;
      } else {
        // this._balancePay(this.$route.query.order_no)
      }
      if (this.orderInfo.order_no) {
        this.orderInfo.order_no = this.$route.query.order_no;
      }
      if (this.$route.query.payment) {
        this.orderInfo.payment = parseInt(this.$route.query.payment);
      } else {
        this.orderInfo.payment =
          parseInt(this.orderInfo.price) * parseInt(this.orderInfo.buy_number);
      }
      this.showPaymentMask = true;
      //   }
      // });
      // 支付
    },

    _getRepresentOrderDetail(id) {
      return getRepresentOrderDetail(id)
        .then(res => {
          if (res.data.code === ERR_OK) {
            console.log(res);
            this.orderInfo = res.data.data;
            this.orderStatus = res.data.data.order_status;
            return Promise.resolve();
          }
        })
        .catch(err => {
          console.log(err);
          return Promise.reject(err);
        });
    },
    _balancePay(order_no) {
      balancePay(order_no)
        .then(res => {
          if (res.data.code === ERR_OK) {
            console.log(res);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _changeRepresentOrderStatus(id, myType) {
      return changeRepresentOrderStatus(id, myType)
        .then(res => {
          if (res.data.code === ERR_OK) {
            console.log(res);
            this.orderStatus = res.data.data.order_status;
            return Promise.resolve();
          }
        })
        .catch(err => {
          console.log(err);
          return Promise.reject(err);
        });
    },
    _deleteRepresentOrder(id) {
      return deleteRepresentOrder(id)
        .then(res => {
          if (res.data.code === ERR_OK) {
            console.log(res);
            return Promise.resolve(res);
          }
        })
        .catch(err => {
          console.log(err);
          return Promise.reject(err);
        });
    }
  },
  components: {
    itemCell,
    confirm,
    paymentMask,
    RepresentPayment
  },
  // beforeRouteLeave(to, from, next) {
  //   if (
  //     to.path.indexOf("/order") === -1 &&
  //     to.path.indexOf("/pay-succ") === -1
  //   ) {
  //     next(false);
  //     this.$router.replace("/orders");
  //   } else {
  //     next();
  //   }
  // },
  created() {
    if (this.$route.query.order_no) {
      console.log(this.$route.query.order_id);
      this._getRepresentOrderDetail(this.$route.query.order_id);
      getBalance()
        .then(res => {
          if (res.data.code === ERR_OK) {
            console.log(res.data.data.balance);
            this.orderInfo.balance = res.data.data.balance;
            console.log(this.orderInfo);
          }
        })
        .catch(err => {
          console.log(err);
        });
    } else {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  color: #444444;

  .status-board {
    overflow: hidden;
    height: 4rem;
    background: #017df5;
    overflow: hidden;
    background-image: url(../../../assets/登录-assets/tm.png);
    background-repeat: no-repeat;
    background-size: 100% 4rem;
    background-position: 0 1.8rem;
    color: rgba(255, 255, 255, 1);

    .main-text {
      font-weight: bold;
      font-size: 0.72rem;
      margin: 1rem 0 0 14.93%;
    }

    .sub-text {
      font-size: 0.56rem;
      margin: 0.2rem 0 0 14.93%;
    }
  }

  .addr-info {
    background-color: #fff;
    height: 4.2rem;
    padding: 0 3.6%;
    font-size: 0.64rem;

    .name_tel {
      padding-top: 0.4rem;
      display: flex;

      .tel {
        color: #999999;
        font-size: 0.56rem;
        line-height: 1rem;
        margin-left: 0.48rem;
      }
    }

    .addr {
      padding-top: 0.48rem;
      max-height: 1.8rem;
      overflow: hidden;
      box-sizing: content-box;
    }
  }

  .after-sale {
    margin-top: 0.48rem;
    background-color: #fff;
    padding-bottom: 0.48rem;
    font-size: 0.56rem;

    .reply {
      border-bottom: 1px solid #dfdfdf;
    }

    .title {
      padding: 0 3.2%;
      height: 1.8rem;
      line-height: 1.8rem;
      display: flex;
      justify-content: space-between;

      .text {
        font-size: 0.64rem;
      }

      .time {
        color: #999999;
      }
    }

    .content {
      padding: 0 3.2%;
      margin-top: 0.5rem;
      color: #666666;
    }
    .img-box {
      padding: 0 3.2%;
      margin-top: 0.5rem;
      display: flex;
      justify-content: space-between;

      .img {
        height: 4.56rem;
        width: 4.56rem;
        background-color: #dfdfdf;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .item-info {
    margin-top: 0.75rem;
    background-color: #fff;
    .btn-after-sale {
      font-size: 0.56rem;
      color: #444444;
      padding: 0.15rem 0.3rem;
      border: 1px solid #dcdcdc;
      border-radius: 0.5rem;
      margin-right: 3.2%;
      margin-bottom: 0.48rem;
    }
  }

  .price-container {
    background: #fff;
    padding: 0.7rem 0;

    .price-detail {
      display: flex;
      justify-content: space-between;
      padding: 0.2rem 3.2%;
      font-size: 0.56rem;

      .price {
        color: #999999;
      }
    }
  }

  .total-price {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 3.2%;
    font-size: 0.56rem;
    height: 1.8rem;
    line-height: 1.8rem;

    .price {
      color: #f85859;
      font-weight: bold;
    }
  }

  .order-detail {
    background-color: #fff;
    margin-top: 0.75rem;
    padding: 0 3.2%;
    position: relative;
    font-size: 0.56rem;
    padding-bottom: 0.48rem;

    .title {
      font-size: 0.64rem;
      font-weight: bold;
      height: 1.8rem;
      line-height: 1.8rem;
    }

    .copy-btn {
      position: absolute;
      background: none;
      border: none;
      color: #a63634;
      outline: none;
      right: 3.2%;
      top: 2rem;
    }

    .detail-cell {
      display: flex;
      line-height: 1rem;
    }
  }

  .bottom-bar {
    display: flex;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #fff;

    button {
      border: none;
      font-size: 0.64rem;
      color: #fff;
    }

    .cart-btn {
      width: 2rem;
      height: 2rem;
      background: none;
      font-size: 0.4rem;
      color: #999999;
      position: relative;
    }

    .single {
      width: 100%;
      font-size: 0.64rem;
      color: #444444;

      img {
        vertical-align: -20%;
      }
    }

    img {
      height: 0.8rem;
      width: 0.8rem;
    }

    .grey {
      width: calc((100% - 2rem) / 2);
      background: rgba(220, 220, 220, 1);
      color: #444444;
    }

    .primary {
      width: calc((100% - 2rem) / 2);
      background: rgba(0, 120, 255, 1);
    }

    .big-btn {
      width: calc(100% - 2rem);
    }
  }
}
</style>
